<script setup lang="ts">
import CommonBox from './common-box/index.vue'
</script>

<template>
  <div class="unknown">
    <div class="outer">
      <div class="title">404</div>
      <div class="content">抱歉，您访问的页面不存在</div>
      <a-card
          headStyle="text-align:center;font-size:25px"
          body-style="display: grid;grid-template-columns: repeat(2,1fr);gap:20px"
          style="width: 100%">
        <template #title>
          联系我们
        </template>
        <common-box>
          <QqOutlined />
          <template #title>
            站长QQ
          </template>
          <template #content>
            2842104784
          </template>
        </common-box>

        <common-box>
          <WechatOutlined />
          <template #title>
            站长微信
          </template>
          <template #content>
            2842104784
          </template>
        </common-box>

        <common-box>
          <TeamOutlined />
          <template #title>
            技术交流群
          </template>
          <template #content>
            2842104784
          </template>
        </common-box>

        <common-box>
          <TeamOutlined />
          <template #title>
            电子邮箱
          </template>
          <template #content>
            2842104784@qq.com
          </template>
        </common-box>
      </a-card>
    </div>
  </div>
</template>
<style scoped lang="scss">
.unknown{
  height: 100vh;
  width: 100vw;
  background-color: rgb(249, 250, 251);
  .outer{
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    //background-color: red;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .title{
      font-weight: 600;
      font-size: 120px;
    }
    .content{
      color: rgb(76, 91, 108);
      margin-bottom: 30px;
    }
    :deep(.ant-card-body){
      &::before{
        display: none;
        content: '';
      }
    }
  }
}
</style>